@import '../../../_variables.scss';

.controls {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;

  @include mq(xs) {
    min-width: 203px;
  }

  button:first-child {
    margin-left: auto;
  }

  button {
    margin-left: $s;
  }
}

.project-list {
}

$project-color-width: $s * 3;

.project {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: $s * 0.5 2 * $s;
  padding-left: 2 * $s + $project-color-width;
  margin-bottom: $s;
  position: relative;
  overflow: hidden;

  > * {
    flex-basis: 33.333%;
  }

  .project-color {
    left: 0;
    top: 0;
    bottom: 0;
    width: $project-color-width;
    position: absolute;

    > * {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .drag-handle {
    @include grabCursor();
  }

  .title {
    font-size: 16px;
    flex: 1;

    &.isCurrent {
      font-weight: bold;
    }
  }

  .issue-providers {
    margin-left: 2 * $s;
    margin-right: 2 * $s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
